import React, { Component } from 'react';

class Life extends Component {
    constructor(props) {
        super(props);
        // console.log("挂载-01-constructor")
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        // 当props发送变化时候更新state
        // console.log("挂载-02-getDerivedStateFromProps")
        console.log("更新-01-getDerivedStateFromProps")
        return ({})
    }
    shouldComponentUpdate(nextProps, nextState) {
        // 组件是否需要更新（组件优化）
        console.log("更新-02-shouldComponentUpdate")
        return true
    }
    
    state = { num:5 }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 组件更新前获取快照，返回的数据是cdu的第三个参数
        console.log("更新-04- getSnapshotBeforeUpdate")
        return {name:"mumu",age:18}
    }
    componentDidUpdate(prevProps, prevState,snapshot) {
        // 组件已经完成更新
        console.log("更新-05- componentDidUpdate",snapshot)
    }
    render() { 
        console.log("更新-03-render渲染");
        // console.log("挂载-03-render")
        return ( <div>
            <h1>生命周期</h1>
            <button onClick={()=>this.setState({num:this.state.num+1})}>
                {this.state.num}
            </button>
        </div> );
    }
    componentDidMount(){
        // console.log("挂载-04-componentDidMoun")
    }
    componentWillUnmount(){
        console.log(" componentWillUnmount组件将要卸载")
    }
}
 
export default Life;
// 卸载阶段
// 01 componentWillUnmount 组将要卸载
// 更新阶段
// 01 getDerivedStateFromProps props更新
// 02 shouldComponentUpdate 组件是否更新 作用优化组件的渲染 返回true更新，
// 03 render 组件重新的渲染
// 04 getSnapshotBeforeUpdate 更新前获取快照
// 05 componentDidUpdate 组件已经更新

// 挂载阶段
// 01 constructor 构造  作用：初始化state
// 02-getDerivedStateFromProps  get获取Derived送达  State状态from从 Props
// 03-render
// 04-componentDidMount 组件已经挂载:
// 作用：监听事件，开启定时器，ajax请求，dom操作
 